<template>
  <div class='container'>
      <!-- 新增目录弹出层 -->
    <el-dialog :visible="showDialog" @close="CancelFn" :title="title">
      <el-form
         class="addform"
        :model="addform"
        ref="addform"
        :rules="addformRules"
        label-position="left"
        label-width="150px"
        style="margin-left:10px;">
        <!-- 所属学科 -->
        <el-form-item
        v-if="subjectID ? false : true"
        label="所属学科"
         prop="subjectID">
          <el-select v-model="addform.subjectID" v-loading="listLoading">
             <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                   </el-option>
          </el-select>
        </el-form-item>
        <!-- 标签名称 -->
        <el-form-item  label="标签名称" prop="tagName" sytle="width:50px">
          <el-input v-model="addform.tagName"></el-input>
        </el-form-item>
      </el-form>
         <div slot="footer" class="dialog-footer">
        <el-button @click="CancelFn">取消</el-button>
        <el-button type="primary" @click="submitFn">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入1.学科列表接口  2.标签添加接口
import { add, update } from '../../api/hmmm/tags'
import { simple } from '../../api/hmmm/subjects'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    subjectID: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      // 表单
      addform: {
        subjectID: '', // 学科id
        tagName: ''// 标签名称
      },
      // 表单校验规则
      addformRules: {
        tagName: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }]
      },
      id: '',
      options: [], // 所属学科下拉列表
      listLoading: false // 加载状态
    }
  },
  created () {
    this.list()// 学科下拉列表渲染
  },
  mounted () {
    this.formDataBack()// 数据回填
  },
  computed: {
    title () {
      return this.id ? '修改标签' : '新增标签'
    }
  },
  methods: {
    // 所属学科渲染下拉列表
    async list () {
      // 开启加载
      this.listLoading = true
      // 调取学科接口
      const { data } = await simple()
      // 更新数据
      this.options = data
      // 关闭加载
      this.listLoading = false
    },
    async submitFn () {
      // 手动校验
      await this.$refs.addform.validate()
      // 数据格式转换 学科那边传subID 是带双引号的
      if (this.id) {
        // 修改
        await update({ id: this.id, subjectID: this.subjectID || this.addform.subjectID, tagName: this.addform.tagName })
      } else {
        // 新增
        await add({ subjectID: this.subjectID || this.addform.subjectID, tagName: this.addform.tagName })
      }
      // 更新视图
      this.$emit('list')
      // 关闭弹层
      this.CancelFn()
    },
    // 点击取消
    CancelFn () {
      // 1.重置表单校验
      this.$refs.addform.resetFields()
      // 2.重置数据
      this.addform = {
        subjectID: '', // 学科id
        tagName: ''// 标签名称
      }
      this.id = ''
      // 3.关闭弹窗
      this.$emit('update:showDialog', false)
    },
    // 数据回填
    async formDataBack (row) {
      this.id = row.id
      this.addform = {
        subjectID: row.subjectID, // 学科id
        tagName: row.tagName// 标签名称
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-input--medium .el-input__inner{
  width:280px
}
/deep/.el-dialog__header {
    padding: 40px 20px 10px;
}
/deep/.el-dialog {
    width: 582px;
}
</style>
